<template>
  <div class="login">
    <a-row align="stretch" class="login-box">
      <a-col :xs="0" :sm="12" :md="15">
        <div class="login-left">
          <img class="login-left__img" src="@/assets/svgs/login-img.svg" />
        </div>
      </a-col>
      <a-col :xs="24" :sm="12" :md="9">
        <div class="login-right">
          <a-form
            ref="formRef"
            :size="isMobile() ? 'large' : 'medium'"
            :model="form"
            :rules="rules"
            :style="{ width: '84%' }"
            :label-col-style="{ display: 'none' }"
            :wrapper-col-style="{ flex: 1 }"
          >
            <h3 class="login-right__title">
              <img class="logo" src="@/assets/images/logo.png" />
              <!-- <span>AISEO</span> -->
            </h3>
            <a-form-item field="username">
              <a-input v-model="form.username" placeholder="请输入登录账号" allow-clear>
                <template #prefix><icon-user :stroke-width="1" :style="{ fontSize: '20px' }" /></template>
              </a-input>
            </a-form-item>
            <a-form-item field="password">
              <a-input-password v-model="form.password" placeholder="请输入密码" allow-clear>
                <template #prefix><icon-lock :stroke-width="1" :style="{ fontSize: '20px' }" /></template>
              </a-input-password>
            </a-form-item>
            <a-form-item class="captcha-item" field="captcha">
              <a-input v-model="form.captcha" placeholder="请输入验证码" allow-clear>
                <template #suffix>
                  <div @click="createCode" class="captcha-box">{{ checkCode }}</div>
                </template>
              </a-input>
            </a-form-item>
            <!-- <a-form-item>
              <a-row justify="space-between" align="center" class="w-full">
                <a-checkbox v-model="checked">记住密码</a-checkbox>
                <a-link>忘记密码</a-link>
              </a-row>
            </a-form-item> -->
            <a-form-item>
              <a-space direction="vertical" fill class="w-full">
                <a-button type="primary" size="large" long :loading="loading" @click="login">登录</a-button>
                <!-- <a-button type="text" size="large" long class="register-btn">注册账号</a-button> -->
              </a-space>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>

    <GiThemeBtn class="theme-btn"></GiThemeBtn>

    <LoginBg></LoginBg>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores'
import { useLoading } from '@/hooks'
import { Message, type FormInstance } from '@arco-design/web-vue'
import LoginBg from './components/LoginBg/index.vue'
import * as Regexp from '@/utils/regexp'
import { isMobile } from '@/utils'

defineOptions({ name: 'Login' })
const router = useRouter()
const userStore = useUserStore()

const form = reactive({
  username: '',
  password: ''
})

const rules: FormInstance['rules'] = {
  username: [{ required: true, message: '请输入账号' }],
  password: [
    { required: true, message: '请输入密码' }
    // { match: Regexp.Password, message: '输入密码格式不正确' }
  ],
  captcha: [
    {
      required: true,
      validator: (value, cb) => {
        return new Promise((resolve) => {
          if (!value) {
            createCode()
            cb('请输入验证码')
          }
          if (value !== checkCode.value) {
            createCode()
            cb('验证码不正确')
          }
          resolve()
        })
      }
    }
  ]
}

// 记住密码
const checked = ref(false)
// 登录加载
const { loading, setLoading } = useLoading()
const errorMessage = ref('')

const formRef = ref<FormInstance>()
// 点击登录
const login = async () => {
  const valid = await formRef.value?.validate()
  if (valid) return
  setLoading(true)
  userStore
    .login(form)
    .then((res) => {
      Message.success('登录成功')
      //跳转首页
      //  router.push({
      //   path: '/home',
      // })

      const { redirect, ...othersQuery } = router.currentRoute.value.query
      router.push({
        path: (redirect as string) || '/',
        query: {
          ...othersQuery
        }
      })
    })
    .catch((error) => {
      Message.error(error)
      // errorMessage.value = (error as Error).message
    })
    .finally(() => {
      setLoading(false)
    })
}
//验证码
const checkCode = ref('')
//获取验证码
const createCode = () => {
  let code = ''
  var codeLength = 4 //验证码的长度
  var random = [
    0,
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z'
  ] //随机数
  for (var i = 0; i < codeLength; i++) {
    //循环操作
    var index = Math.floor(Math.random() * 36) //取得随机数的索引（0~35）
    code += random[index] //根据索引取得随机数加到code上
  }
  checkCode.value = code //把code值赋给验证码
}
onMounted(() => {
  createCode()
})
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-bg-5);
  &-box {
    width: 86%;
    max-width: 720px;
    height: 380px;
    display: flex;
    z-index: 999;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
  }
}

.login-left {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(60deg, rgb(var(--primary-6)), rgb(var(--primary-3)));
  &__img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all 0.3s;
    object-fit: cover;
  }
}

.login-right {
  width: 100%;
  height: 100%;
  background: var(--color-bg-1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  box-sizing: border-box;
  &__title {
    color: var(--color-text-1);
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    .logo {
      // width: 32px;
      height: 32px;
      // margin-right: 6px;
    }
  }
  .captcha-item {
    .arco-input-wrapper {
      border: none;
      border-bottom: 1px solid #cdd0d6;
      padding-right: 0;
    }
    .captcha-box {
      width: 100px;
      height: 24px;
      line-height: 24px;
      border: 2px solid #148be4;
      border-radius: 10px;
      cursor: pointer;
      color: #1e9fff;
      font-weight: bold;
      font-style: oblique;
      letter-spacing: 5px;
      font-size: 16px;
      text-align: center;
    }
  }
}

.register-btn,
.register-btn:hover {
  color: var(--color-text-2);
}

.theme-btn {
  position: fixed;
  top: 20px;
  left: 30px;
  z-index: 9999;
}
</style>
